<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
</head>
<body>
  <button id="btn1">GET</button>
  <button id="btn2">POST</button>
  <button id="btn3">PUT</button>
  <button id="btn4">PATCH</button>
  <button id="btn5">DELETE</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <script>
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');
    const btn3 = document.getElementById('btn3');
    const btn4 = document.getElementById('btn4');
    const btn5 = document.getElementById('btn5');

    const axiosInstance1 = axios.create({
      baseURL: 'http://localhost:3000', // 基本请求路径
      timeout: 10000, // 请求的超时时间
      headers: { // 公共请求头

      }
    })

    const axiosInstance2 = axios.create({
      baseURL: 'http://localhost:4000', // 基本请求路径
      timeout: 10000, // 请求的超时时间
      headers: { // 公共请求头
        
      }
    })

    btn1.onclick = function () {
      axiosInstance({
        method: 'GET',
        url: '/posts',
      })
        .then((res) => {
          console.log(res.data);
        })
        .catch(err => console.log(err))
    }


    btn2.onclick = function () {
      axiosInstance({
        method: 'POST',
        url: `${API_PREFIX}/posts`,
        data: {
          author: "peihua",
          title: "文档~~",
        }
      })
        .then((res) => {
          console.log(res.data);
        })
        .catch(err => console.log(err))
    }


    btn3.onclick = function () {
      axiosInstance({
        method: 'PUT', // 全部改
        url: 'http://localhost:3000/posts/2',
        data: {
          author: "peihua222",
          title: "peihua222",
        }
      })
        .then((res) => {
          console.log(res.data);
        })
        .catch(err => console.log(err))
    }

    btn4.onclick = function () {
      axiosInstance({
        method: 'PATCH', // 部分改
        url: 'http://localhost:3000/posts/3',
        data: {
          author: "peihua333",
        }
      })
        .then((res) => {
          console.log(res.data);
        })
        .catch(err => console.log(err))
    }

    btn5.onclick = function () {
      axiosInstance({
        method: 'DELETE', // 删除 软删除
        url: 'http://localhost:3000/posts/3'
      })
        .then((res) => {
          console.log(res.data);
        })
        .catch(err => console.log(err))
    }

  </script>
</body>
</html>